<script lang="ts" setup>
import { PlanItem } from "../../../utils/ts/price";
const { item } = defineProps<{ item: PlanItem }>();
const emit = defineEmits(["click"]);

</script>
<template>
  <div class="bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition duration-300">
    <div class="mb-8">
      <h3 class="text-2xl font-semibold text-white">{{ item.type }}</h3>
      <p class="mt-4 text-gray-400">{{ item.desc }}</p>
    </div>
    <div class="mb-8">
      <span class="text-3xl font-extrabold text-white">￥{{ item.price }}</span>
      <span class="text-xl font-medium text-gray-400" :style="item.unit ? 'visibility: hidden' : ''">
        /月
      </span>
    </div>
    <ul class="mb-8 space-y-4 text-gray-400">
      <li class="flex items-center" v-for="(advantage, index) in item.pro" :key="item.type + index">
        <svg class="h-6 w-6 text-green-500 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
          stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        <span>{{ advantage }}</span>
      </li>
    </ul>
    <a href="javascript:void(0)" @click="emit('click')"
      class="block w-full py-3 px-6 text-center rounded-md text-white font-medium bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600">
      {{ item.but }}
    </a>
  </div>
</template>
<style lang="scss" scoped></style>
